<template>
	<view class="wrap">
		<u-form :model="formData" :rules="rules" ref="uForm">
			<!-- 头像上传 -->
			<view class="avatar-section">
				<image :src="formData.avatar || '/static/default-avatar.png'" class="avatar" @tap="chooseAvatar">
				</image>
				<text class="tip">点击更换头像</text>
			</view>

			<!-- 表单内容 -->
			<view class="form-section">
				<u-form-item label="用户名" prop="name" label-width="180">
					<u-input v-model="formData.name" placeholder="请输入用户名" />
				</u-form-item>

				<u-form-item label="性别" prop="sex" label-width="180">
					<u-radio-group v-model="formData.sex" placement="row">
						<view class="radio-list">
							<view class="radio-item">
								<u-radio :name="1" label="男" active-color="#EE2F37">男</u-radio>
							</view>
							<view class="radio-item">
								<u-radio :name="2" label="女" active-color="#EE2F37">女</u-radio>
							</view>
						</view>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="身份证号" prop="idNumber" label-width="180">
					<u-input v-model="formData.idNumber" type="idcard" placeholder="选填" />
				</u-form-item>
			</view>
		</u-form>

		<!-- 保存按钮 -->
		<view class="submit-btn" @tap="submit">保存修改</view>

		<!-- 添加手机号绑定弹窗 -->
		<u-popup v-model="showBindPhone" mode="bottom" height="400">
			<view class="bind-phone-popup">
				<view class="popup-title">绑定手机号</view>
				<view class="input-group">
					<u-input v-model="bindPhoneForm.phone" type="number" placeholder="请输入手机号" />
					<view class="code-input">
						<u-input v-model="bindPhoneForm.code" type="number" placeholder="请输入验证码" maxlength="6" />
						<view class="code-btn" @tap="getCode" :class="{'disabled': counting}">
							{{counting ? `${counter}s后重试` : '获取验证码'}}
						</view>
					</view>
				</view>
				<view class="popup-btn" @tap="confirmBind">确认绑定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getUserDetail,
		getUpdateUserDetail
	} from '@/request/API.js'

	export default {
		data() {
			return {
				formData: {
					name: '',
					phone: '',
					sex: '男',
					idNumber: '',
					avatar: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					}],
					idNumber: [{
						pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
						message: '请输入正确的身份证号',
						trigger: ['blur', 'change']
					}]
				},
				showBindPhone: false,
				bindPhoneForm: {
					phone: '',
					code: ''
				},
				counting: false,
				counter: 60
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			// 获取用户信息
			async getUserInfo() {
				try {
					const {
						data
					} = await getUserDetail()
					this.formData = {
						...this.formData,
						...data
					}
				} catch (error) {
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none'
					})
				}
			},
			// 选择头像
			async chooseAvatar() {
				try {
					const res = await uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: ['album', 'camera']
					})
					if (res.tempFilePaths.length > 0) {
						// 上传图片
						uni.uploadFile({
							url: 'https://gzboss.fun/album/admin/common/upload', // 替换为实际的上传接口
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (uploadRes) => {
								const data = JSON.parse(uploadRes.data)
								if (data.code === 200) {
									this.formData.avatar = data.data
									uni.showToast({
										title: '上传成功',
										icon: 'success'
									})
								}
							},
							fail: () => {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								})
							}
						})
					}
				} catch (error) {
					console.error('选择图片失败', error)
				}
			},
			// 提交表单
			submit() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						try {
							delete this.formData.id;
							const res = await getUpdateUserDetail(this.formData)
							if (res.code === 200) {
								uni.showToast({
									title: res.data.data,
									icon: 'success'
								})
								// 更新本地存储的用户信息
								uni.setStorageSync('userInfo', JSON.stringify(this.formData))
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							}
						} catch (error) {
							console.error('保存失败', error)
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							})
						}
					}
				})
			},
			// 打开手机号绑定弹窗
			bindPhone() {
				this.showBindPhone = true;
				this.bindPhoneForm.phone = '';
				this.bindPhoneForm.code = '';
			},
			// 获取验证码
			getCode() {
				if (this.counting) return;
				if (!this.bindPhoneForm.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				// 开始倒计时
				this.counting = true;
				this.counter = 60;
				const timer = setInterval(() => {
					this.counter--;
					if (this.counter <= 0) {
						clearInterval(timer);
						this.counting = false;
					}
				}, 1000);

				// TODO: 调用发送验证码接口
				uni.showToast({
					title: '验证码已发送',
					icon: 'none'
				});
			},
			// 确认绑定手机号
			confirmBind() {
				if (!this.bindPhoneForm.phone || !this.bindPhoneForm.code) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}
				// TODO: 调用绑定手机号接口
				this.formData.phone = this.bindPhoneForm.phone;
				this.showBindPhone = false;
				uni.showToast({
					title: '绑定成功',
					icon: 'success'
				});
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		min-height: 100vh;
		background: #f5f5f5;
		padding: 20rpx;

		.avatar-section {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40rpx 0;
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				margin-bottom: 20rpx;
			}

			.tip {
				font-size: 24rpx;
				color: #999;
			}
		}

		.form-section {
			background: #fff;
			border-radius: 16rpx;
			padding: 20rpx;

			/deep/ .u-form-item {
				padding: 20rpx 0;
			}

			.phone-input {
				display: flex;
				align-items: center;

				.bind-btn {
					margin-left: 20rpx;
					padding: 10rpx 30rpx;
					background: #EE2F37;
					color: #fff;
					border-radius: 30rpx;
					font-size: 24rpx;
				}
			}

			.radio-list {
				display: flex;
				gap: 60rpx;

				.radio-item {
					min-width: 120rpx;
					padding: 10rpx 0;
				}
			}
		}

		.submit-btn {
			position: fixed;
			bottom: 40rpx;
			left: 40rpx;
			right: 40rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #EE2F37;
			color: #fff;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: bold;

			&:active {
				opacity: 0.9;
			}
		}
	}

	.bind-phone-popup {
		padding: 40rpx;

		.popup-title {
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 40rpx;
		}

		.input-group {
			.code-input {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.code-btn {
					margin-left: 20rpx;
					padding: 20rpx 30rpx;
					background: #EE2F37;
					color: #fff;
					border-radius: 30rpx;
					font-size: 24rpx;
					white-space: nowrap;

					&.disabled {
						background: #999;
					}
				}
			}
		}

		.popup-btn {
			margin-top: 60rpx;
			text-align: center;
			padding: 24rpx;
			background: #EE2F37;
			color: #fff;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
</style>